<template>
<!-- 角色列表 -->
    <div class="rolelist">
         <!-- 面包屑导航 -->
    <div class="Breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="javascript:;">权限管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 添加角色按钮 -->
     <el-button type="primary" plain>添加角色</el-button>
     <!-- 角色信息表格 -->
     <div class="tablelist">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="expand">
            <template slot-scope="scope">

                <!-- 3层遍历数据 -->
                <!-- 第一层 -->
                <el-row v-for='firstChildItem in scope.row.children' :key='firstChildItem.id'>
                    <el-col :span="4"><el-tag closable  @close='closeTag(scope.row.id,firstChildItem.id,scope.row)'>{{firstChildItem.authName}}</el-tag>
                    <i class="el-icon-arrow-right" v-if="firstChildItem.children.length > 0"></i>
                    </el-col>
                     <!-- 当层级的children后面没有children了，需要将箭头隐藏掉。通过v-if="firstChildItem.children.length>0"条件实现 -->
                    <el-col :span="20">
                    <!--第二层-->
                    <el-row v-for='secondChildItem in firstChildItem.children' :key='secondChildItem.id'>
                        <el-col :span="4"><el-tag  closable type="success"  @close='closeTag(scope.row.id,secondChildItem.id,scope.row)'>{{secondChildItem.authName}}</el-tag>
                        <i class="el-icon-arrow-right" v-if="secondChildItem.children.length > 0"></i>
                        <!-- 当层级的children后面没有children了，需要将箭头隐藏掉。通过v-if="secondChildItem.children.length>0"条件实现 -->
                        </el-col>
                        <el-col :span="20">
                            <!-- 第三层 -->
                            <el-tag closable type="warning" v-for='thirdChildItem in secondChildItem.children' :key='thirdChildItem.id' @close='closeTag(scope.row.id,thirdChildItem.id,scope.row)'>{{thirdChildItem.authName}}</el-tag>
                        </el-col>
                    </el-row>
                    </el-col>
                </el-row>
                <!-- 设置如果该角色还没有权限的话，添加提示信息，提示信息是需要判断，判断scope.row.children中的数据是否为空(判断长度是否小于0) -->
                <el-tag type="info" v-if='scope.row.children.length <= 0'>该角色还没有添加权限，请进行添加</el-tag>
            </template>
        </el-table-column>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" ></el-table-column>
        <el-table-column prop="roleDesc" label="描述" ></el-table-column>
        <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
            <el-button
            icon="el-icon-edit" circle
            type="primary" plain
            @click="handleEdit(scope.row)"></el-button>
            <el-button
            type="danger"
            plain circle
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"></el-button>
            <el-button
            type="warning" plain circle
            icon="el-icon-check"
            @click="handleCheck(scope)"></el-button>
      </template>
    </el-table-column>
      </el-table>
       <!-- 用户角色弹窗 -->
       <!--   :default-expanded-keys="[2, 3]"
                 -->
     <div >
       <!-- default-expand-all用于展开所有的内容，:default-checked-keys="selectRightId"显示当前角色权限并在前面打上勾 -->
        <el-dialog title="编辑角色" :visible.sync="checkFormVisible" width=35% >
          <!-- 树形组件 -->
            <el-tree
            class="checkpower"
                ref="tree"
                :data="checkpowerlist"
                show-checkbox
                node-key="id"
                default-expand-all
                :default-checked-keys="selectRightId"
                :props="defaultProps">
              </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="checkFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmcheckUser">确 定</el-button>
            </div>
            <!-- @click='confirmcheckUser' -->
        </el-dialog>
    </div>
    </div>
    </div>
</template>

<script>
// 传入方法
import { getRoles, delRoles, getrights, setRolesChecked } from '@/api/index.js'
export default {
  data () {
    return {
      tableData: [], // 角色列表数组
      checkFormVisible: false, // 角色权限弹窗页面显示隐藏
      checkpowerlist: [], // 树形组件数据存储变量
      defaultProps: {
        children: 'children', // 指定子树为节点对象的某个属性值
        label: 'authName' // 指定节点标签为节点对象的某个属性值
      },
      selectRightId: [], // 显示当前角色的权限
      roleid: ''
    }
  },
  created () {
    // 页面已加载后执行initRoleslist()获取角色列表数据
    this.initRoleslist()
  },
  methods: {
    //   获取角色中列表的数据
    initRoleslist () {
      getRoles()
        .then(res => {
        //   console.log(res)
          this.tableData = res.data.data
        })
    },
    // 关闭删除标签，传递3个参数用户id，角色id和scope.row,执行delRoles方法传输用户id和角色id
    closeTag (roleid, rightid, row) {
    //   console.log(roleid, rightid)
      delRoles(roleid, rightid)
        .then(res => {
        //   console.log(res)
          if (res.data.meta.status === 200) {
            this.$message.success(res.data.meta.msg)
            //   当删除成功的时候，把返回的数据重新覆盖到row.children，优化体验，不必刷新页面即可获取最新的数据
            row.children = res.data.data
          } else {
            this.$message.error(res.data.meta.msg)
          }
        })
    },
    //   编辑
    handleEdit (row) {

    },
    // 删除
    handleDelete (row) {

    },
    // 编辑用户的权限
    handleCheck (scope) {
      // console.log(scope.row)
      this.roleid = scope.row.id
      // 每次打开当前选择的角色的权限列表时先重置为空数组
      this.selectRightId = []
      // 而后判断作用域插槽中scope中的值children是否有数据并且存在该值。因为数据有三层，并且需要获取到最后一层children属性中的id值，需要进过三次判断，每次判断结束后需要使用foreach进行遍历数据，为下次判断左准备
      if (scope.row.children.length > 0) {
        scope.row.children.forEach(firstChildItem => {
          if (firstChildItem.children && firstChildItem.children.length > 0) {
            firstChildItem.children.forEach(secondChildItem => {
              if (secondChildItem.children && secondChildItem.children.length > 0) {
                secondChildItem.children.forEach(thirdChildItem => {
                  // console.log(thirdChildItem.id)
                  // 把最后得出的结果通过数组追加的方式把获取到的id进行添加
                  this.selectRightId.push(thirdChildItem.id)
                })
              }
            })
          }
        })
      }
      // 显示编辑角色权限页面
      this.checkFormVisible = true
      getrights('tree')
        .then(res => {
          // console.log(res)
          // 获取到权限数据后打印到页面中显示，在页面中显示共有多少中权限
          this.checkpowerlist = res.data.data
        })
    },
    // 在编辑角色权限页面后点击确认
    confirmcheckUser () {
      // 获取选中的节点的key所组成的数组
      let allChecked = this.$refs.tree.getCheckedKeys()
      // 获取半选中的节点key所组成的数组
      let halfChecked = this.$refs.tree.getHalfCheckedKeys()
      // 把两个数组进行合并，通过concat
      let allHalfChecked = allChecked.concat(halfChecked)
      // 因为后台需要的数据是字符串格式所以需要把合并的数组数据通过使用join以“，”逗号进行分割
      let allHalfstr = allHalfChecked.join(',')
      // 传递参数给setRolesChecked，传递角色id和权限id
      setRolesChecked(this.roleid, allHalfstr)
        .then(res => {
          // console.log(res.data.meta.status)
          if (res.data.meta.status === 200) {
            // 更新页面数据显示
            this.initRoleslist()
            // 隐藏弹窗
            this.checkFormVisible = false
            // 页面中的成功提示信息
            this.$message.success(res.data.meta.msg)
          } else {
            // 页面中的错误提示信息
            this.$message.error(res.data.meta.msg)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.rolelist{
    .Breadcrumb {
    padding: 15px 10px;
    background-color: #f5f5f5;
    margin-bottom: 10px;
  }
  .tablelist {
      margin-top: 10px;
      .el-tag {
          margin: 5px;
      }
       .el-icon-arrow-right {
              margin-left: 20px;
              font-size: 16px;
          }
  }
}
 .checkpower {
    height: 350px;
    overflow-y: scroll;
  }
</style>
